<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>社区老龄健康系统</title>
    <!-- 公共CSS -->
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css"
          rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/style.css"
          <link href="/css/bootstrap.min.css"
          rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css"
          rel="stylesheet">
    <style>
        .theme-toggle-btn {
            border: none;
            background: #4A90E2;
            color: var(--primary-color, #2c3e50);
            font-size: 1.4rem;
            margin-left: 1rem;
            cursor: pointer;
            transition: color 0.3s;
        }
        .theme-toggle-btn:hover {
            color: var(--secondary-color, #3498db);
        }

    </style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top shadow-sm">
    <div class="container">
        <div class="d-flex align-items-center order-lg-2">
            <button class="theme-toggle-btn" id="themeToggleBtn" title="切换主题">
                <i class="fas fa-moon"></i>
            </button>
        </div>
        <div>
            <c:choose>
                <c:when test="${not empty sessionScope.user}">
                    <!-- 访问正确的username属性，添加空值默认处理 -->
                    <span class="navbar-text text-white me-3">
                        <i class="fas fa-user-circle"></i>
                        ${sessionScope.user.username != null ?
                        sessionScope.user.username : '用户'}
                    </span>
                    <a href="${pageContext.request.contextPath}/index2.jsp">返回首页</a>
                </c:when>
            </c:choose>
        </div>
    </div>
</nav>
<div class="container mt-4">
    <script>
        (function () {
            const html = document.documentElement;
            const btn = document.getElementById('themeToggleBtn');
            const icon = btn.querySelector('i');
            const THEME_KEY = 'chs_theme';

            function setTheme(theme) {
                html.setAttribute('data-theme', theme);
                localStorage.setItem(THEME_KEY, theme);
                icon.className = theme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
                btn.title = theme === 'dark' ? '切换为浅色模式' : '切换为深色模式';
            }

            function toggleTheme() {
                setTheme(html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
            }

            btn.addEventListener('click', toggleTheme);

            // 初始化主题
            const saved = localStorage.getItem(THEME_KEY);
            if (saved === 'dark' || (saved !== 'light' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                setTheme('dark');
            } else {
                setTheme('light');
            }
        })();

        window.addEventListener('scroll', function () {
            const nav = document.querySelector('.navbar');
            if (window.scrollY > 10) {
                nav.classList.add('scrolled');
            } else {
                nav.classList.remove('scrolled');
            }
        });
    </script>
</div> <!-- 关闭 container -->
</body>
</html>